<template>
  <div>
    <el-dialog
      v-if="dialogVisible"
      title="站内信列表"
      :visible.sync="dialogVisible"
      width="1300px"
      append-to-body
      @closed="closeDialog"
    >
      <div style="height: 93%;padding-left: 13px">
        <station-message ref="messageRef" />
      </div>
      <div
        slot="footer"
        class="dialog-footer"
        style="border-top: 1px solid var(--light-blue-color);
    padding-top: 20px;"
      >
        <el-button
          type="primary"
          @click="closeDialog"
        >
          关 闭
        </el-button>
      </div>
    </el-dialog>
    <t-popup
      expand-animation
      placement="bottom"
      trigger="click"
      :visible="isNoticeVisible"
      @visible-change="onPopupVisibleChange"
    >
      <template #content>
        <div class="header-msg">
          <div class="header-msg-top">
            <p>通知（通知数目：{{ unreadMsg.length }}）</p>
            <t-button
              v-if="unreadMsg.length > 0"
              class="clear-btn"
              variant="text"
              theme="primary"
              @click="setRead('all')"
            >
              全部已读
            </t-button>
          </div>
          <t-list
            v-if="unreadMsg.length > 0"
            class="narrow-scrollbar"
            :split="true"
          >
            <t-list-item
              v-for="(item, index) in unreadMsg"
              :key="index"
            >
              <div>
                <p class="msg-content">
                  内容：{{ item.content }}
                </p>
                <p class="msg-type">
                  发送方：{{ item.sender }}
                </p>
              </div>
              <p class="msg-time">
                {{ item.createTime }}
              </p>
              <template #action>
                <t-button
                  size="small"
                  variant="outline"
                  @click="setRead('radio', item)"
                >
                  设为已读
                </t-button>
              </template>
            </t-list-item>
          </t-list>

          <div
            v-else
            class="empty-list"
          >
            <img
              src="../../assets/mainEntrance/nothing.png"
              alt="空"
            >
            <p>暂无通知</p>
          </div>
          <div class="header-msg-bottom">
            <!-- v-if="unreadMsg.length > 0" -->
            <t-button
              class="header-msg-bottom-link"
              variant="text"
              theme="primary"
              @click="goDetail"
            >
              查看全部
            </t-button>
          </div>
        </div>
      </template>
      <t-badge
        :count="unreadMsg.length"
        :offset="[10, 3]"
      >
        <t-button
          theme="default"
          shape="square"
          variant="text"
          style="background: transparent;border: 0;"
          @click="isNoticeVisible = true"
        >
          <!-- <mail-icon style="color: var(--white-color);"/> -->
          <svg-icon
            :icon-class="$store.state.setting.mode === 'light' ? 'message-new' : 'message-new-dark'"
            class="panelIconClass"
          />
        </t-button>
      </t-badge>
    </t-popup>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { mapState, mapGetters } from "vuex";
// import { MailIcon } from 'tdesign-icons-vue';
import { getByTenantId, updateAllStatus, updateOneStatus } from "@/api/mainEntrance/system/notification.js";

import { NotificationItem } from "@/interface";
import stationMessage from "@/pages/mainEntrance/stationMessage/index.vue";

export default Vue.extend({
  components: {
    // MailIcon,
    stationMessage
  },
  data() {
    return {
      isNoticeVisible: false,
      dialogVisible: false
    };
  },
  computed: {
    ...mapState("notification", ["msgData"]),
    ...mapGetters("notification", ["unreadMsg"])
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      getByTenantId({
        userId: this.$store.getters["user/userDetail"].user.userId, status: "0", pageNum: 1,
        pageSize: 100000
      }).then(res => {
        this.$store.commit("notification/setMsgData", res.data.rows);
      });
    },
    onPopupVisibleChange(visible: boolean, context) {
      if (context.trigger === "trigger-element-click") {
        this.isNoticeVisible = true;
        return;
      }
      this.isNoticeVisible = visible;
    },
    closeDialog() {
      this.dialogVisible = false;
      this.$refs.messageRef.resetData();
    },
    goDetail() {
      this.dialogVisible = true;
      this.isNoticeVisible = false;
    },
    setRead(type: string, item?: NotificationItem) {
      if (type === "all") {
        // changeMsg.forEach((e) => {
        //   e.status = false;
        // });
        updateAllStatus(this.$store.getters["user/userDetail"].user.userId).then(() => {
          this.getList();
        });
      } else {
        // changeMsg.forEach((e) => {
        //   if (e.id === item.id) {
        //     e.status = false;
        //   }
        // });
        updateOneStatus({ userId: this.$store.getters["user/userDetail"].user.userId, mailId: item.mailId }).then(() => {
          this.getList();
        });
      }
      // this.$store.commit('notification/setMsgData', changeMsg);
    }
  }
});
</script>

<style lang="less" scoped>
@import "@/style/variables.less";

.header-msg {
  width: 400px;
  height: 500px;

  .empty-list {
    height: calc(100% - 104px);
    text-align: center;
    padding-top: 135px;
    font-size: 14px;
    color: var(--td-text-color-secondary);

    img {
      width: 63px;
    }

    p {
      margin-top: 30px;
    }
  }

  &-top {
    position: relative;
    height: 56px;
    font-size: 16px;
    color: var(--td-text-color-primary);
    text-align: center;
    line-height: 56px;
    border-bottom: 1px solid var(--td-component-border);

    .clear-btn {
      position: absolute;
      top: 12px;
      right: 24px;
    }
  }

  &-bottom {
    height: 48px;
    align-items: center;
    display: flex;
    justify-content: center;

    &-link {
      text-decoration: none;
      font-size: 14px;
      color: var(--td-brand-color);
      line-height: 48px;
      cursor: pointer;
    }
  }

  .t-list {
    height: calc(100% - 104px);
  }

  .t-list-item {
    overflow: hidden;
    width: 100%;
    padding: 16px 24px;
    border-radius: @border-radius;
    font-size: 14px;
    color: var(--td-text-color-primary);
    line-height: 22px;
    cursor: pointer;

    &:hover {
      transition: background 0.2s ease;
      background: var(--td-bg-color-container-hover);

      .msg-content {
        color: var(--td-brand-color-8);
      }

      .t-list-item__action {
        button {
          bottom: 16px;
          opacity: 1;
        }
      }

      .msg-time {
        bottom: -6px;
        opacity: 0;
      }
    }

    .msg-content {
      margin-bottom: 16px;
    }

    .msg-type {
      color: var(--td-text-color-secondary);
    }

    .t-list-item__action {
      button {
        opacity: 0;
        position: absolute;
        right: 24px;
        bottom: -6px;
      }
    }

    .msg-time {
      transition: all 0.2s ease;
      opacity: 1;
      position: absolute;
      right: 24px;
      bottom: 16px;
      color: var(--td-text-color-secondary);
    }
  }
}
</style>
<style scoped>
.operations-container .t-button {
  margin: 0 5px;
}
</style>